<template>
	<view class="login">
		<view class="login-body">
			<view class="info">
				<view class="form-rows">
					<view class="form-row">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/login/phone.png"
							mode="widthFix" class="form-row-icon"></image>
						<input type="text" placeholder="请输入手机号码" placeholder-class="input-placeholder"
							class="form-row-input" v-model="form.mobile" />
					</view>
					<view class="form-row" v-if="regis_sms_enable!=0">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/login/yanzhengma.png"
							mode="widthFix" class="form-row-icon"></image>
						<input type="text" placeholder="请输入验证码" placeholder-class="input-placeholder"
							class="form-row-input" v-model="form.code" />
						<view class="code-container">
							<u-code ref="uCode1" startText="验证码" :seconds="sms_time_out" @change="codeChange"
								keep-running change-text="Xs" @start="disabled = true" @end="disabled = false"></u-code>
							<button size="mini" @tap="getCode" :disabled="disabled" class="code-btn">{{tips}}</button>
						</view>
					</view>
					<view class="form-row">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/login/reid.png"
							mode="widthFix" class="form-row-icon"></image>
						<input type="text" placeholder="请输入姓名" placeholder-class="input-placeholder"
							class="form-row-input" v-model="form.realname_reg" />
					</view>
					<view class="form-row">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/login/mima.png"
							mode="widthFix" class="form-row-icon"></image>
						<input type="password" placeholder="请输入密码" placeholder-class="input-placeholder"
							class="form-row-input" v-model="form.password" />
					</view>
					<view class="form-row">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/login/mima.png"
							mode="widthFix" class="form-row-icon"></image>
						<input type="password" placeholder="请再次确认密码" placeholder-class="input-placeholder"
							class="form-row-input" v-model="form.conpassword" />
					</view>
					<view class="form-row">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/login/reid.png"
							mode="widthFix" class="form-row-icon"></image>
						<input type="number" placeholder="请输入推荐人ID号" placeholder-class="input-placeholder"
							class="form-row-input" v-model="form.rekey" />
					</view>
				</view>
				<view class="form-agree">
					<image mode="widthFix" @tap.stop="agreeimg"
						:src="agree?'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/check-box-sel.png':'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/check-box.png'" />
					<text @tap="xieyi">同意注册协议</text>
				</view>
				<view class="form-btns">
					<button class="login-btn" :disabled="btnDisabled" @click="tijiao">立即注册</button>
					<view style="height: 60rpx;"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCode,
		isWeiXin
	} from "../../common/helper";
	var validate = require("@/components/validate/validate.js");
	export default {
		data() {
			return {
				agree: false,
				form: {
					//手机号
					mobile: '',
					//验证码
					code: '',
					realname_reg: '',
					//密码
					password: '',
					//确认密码
					conpassword: '',
					//推荐人
					rekey: '',
					step: 1,
				},
				tips: '',
				disabled: false,
				btnDisabled: false,
				regis_sms_enable: 0,
				sms_time_out: 60,
			}
		},
		onLoad(option) {
			if (option.rekey != undefined) {
				this.form.rekey = option.rekey
			}


		},
		methods: {
			tijiao() {
				this.form.step = 2
				this.submitForm()
			},
			async submitForm() {
				if (this.form.step == 2) {
					let codeRule = {
						// 字段名
						name: 'code',
						rules: ['require', 'integer', 'min:6'],
						errorMsg: {
							require: '请输入验证码',
							integer: '验证码只能为数字',
							min: '验证码为6位'
						}
					}
					var rule = [{
							// 字段名
							name: 'mobile',
							rules: ['require', 'mobile'],
							errorMsg: {
								require: '手机号码不能为空',
								mobile: '手机号码格式有误',
							}
						}, {
							// 字段名
							name: 'realname_reg',
							rules: ['require'],
							errorMsg: {
								require: '请输入姓名',
							}
						},
						{
							// 字段名
							name: 'password',
							rules: ['require', 'min:6'],
							errorMsg: {
								require: '密码不能为空',
								min: '密码最少6位'
							}
						},
						{
							// 字段名
							name: 'conpassword',
							rules: ['require', 'confirm:password'],
							errorMsg: {
								require: '请输入确认密码',
								confirm: '两次密码输入不一致'
							}
						},
					];
					if (this.regis_sms_enable == '1') {
						rule.splice(1, 0, codeRule)
					}
					// 是否全部通过，返回Boolean
					let checked = validate.check(this.form, rule);
					if (!checked) {
						// 获取错误信息
						let err = validate.getError();
						uni.$u.toast(err[0])
						return;
					}

					if (!this.agree) {
						uni.$u.toast('请阅读并同意注册协议')
						return;
					}
					this.btnDisabled = true
				}
				const form = uni.$u.deepClone(this.form)

				const data = await this.$post('api/do_register', form)
				if (data.code == 200) {
					this.$u.toast(data.msg)
					setTimeout(res => {
						uni.redirectTo({
							url: '/pages/auth/login'
						})
					}, 2000)
				} else if (data.code == 10) {
					this.regis_sms_enable = data.data.regis_sms_enable
					this.sms_time_out = data.data.sms_time_out
				} else {
					this.$u.toast(data.msg)
				}
				setTimeout(res => {
					this.btnDisabled = false
				}, 2000)
			},
			//跳转到注册协议页面
			xieyi() {
				this.$u.route({
					url: '/pages/index/html-detail',
					params: {
						title: '注册协议',
						url: encodeURIComponent('/api/xieyi_xq?id=1')
					}
				})
			},
			//跳转到注册页面
			loginto() {
				this.$u.route({
					type: "back"
				})
			},
			//同意协议
			agreeimg() {
				this.agree = !this.agree
			},
			//获取验证码
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				//单独验证使用
				let check = validate.checkResult('mobile', this.form.mobile);
				if (!check) {
					uni.$u.toast("手机号码格式有误")
					return
				}
				if (this.$refs.uCode1.canGetCode) {
					const params = {
						mobile: this.form.mobile,
						scene: 2
					}
					const data = await this.$post('api/GetCode', params)
					if (data.code == 200) {
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast(data.msg);
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode1.start();
					} else {
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast(data.msg);
					}
				} else {
					uni.$u.toast('请倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/login.scss";
</style>